<template>
  <div class="create-order-page">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h2>确认订单信息</h2>
        </div>
      </template>
      <div v-if="animal" class="order-details">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-image :src="animal.imageUrl" fit="cover" class="animal-image"/>
          </el-col>
          <el-col :span="16">
            <h3>{{ animal.name }}</h3>
            <p><strong>品种:</strong> {{ animal.breed }}</p>
            <p><strong>价格:</strong> <span class="price">¥{{ animal.price }}</span></p>
          </el-col>
        </el-row>
        <el-divider />
        <el-form :model="order" label-width="120px" :rules="rules" ref="orderForm">
          <el-form-item label="收货人" prop="consignee">
            <el-input v-model="order.consignee" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="order.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input type="textarea" v-model="order.address" placeholder="请输入详细收货地址"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="order.remark" placeholder="如有特殊要求，请在此填写"></el-input>
          </el-form-item>
          <el-form-item label="订单总价">
            <span class="final-price">¥{{ order.finalPrice }}</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitOrder">提交订单</el-button>
            <el-button @click="router.back()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <el-skeleton :rows="5" animated />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
// --- 修改 1/2 ---
// 修正了导入的函数名，从 getAnimalByIdApi 改为 getAnimalById
import { getAnimalById } from '@/api/animal.js';
import { createOrderApi } from '@/api/order.js'; // 假设您有创建订单的API函数

const route = useRoute();
const router = useRouter();
const orderForm = ref(null);

const animal = ref(null);
const order = ref({
  animalId: null,
  consignee: '',
  phone: '',
  address: '',
  remark: '',
  finalPrice: 0,
});

const rules = {
  consignee: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  address: [{ required: true, message: '请输入收货地址', trigger: 'blur' }],
};

const fetchAnimalDetails = async (id) => {
  try {
    // --- 修改 2/2 ---
    // 修正了调用的函数名
    const res = await getAnimalById(id);
    if (res) {
      animal.value = res;
      order.value.animalId = res.id;
      order.value.finalPrice = res.price;
    } else {
      ElMessage.error('获取宠物信息失败');
    }
  } catch (error) {
    console.error('获取宠物信息失败:', error);
  }
};

const submitOrder = async () => {
  if (!orderForm.value) return;
  await orderForm.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await createOrderApi(order.value);
        if (res) {
          ElMessage.success('订单创建成功！');
          // 跳转到订单列表或支付页面
          router.push('/user/orderlist');
        } else {
          ElMessage.error(res.message || '订单创建失败');
        }
      } catch (error) {
        console.error('订单创建失败:', error);
      }
    } else {
      ElMessage.warning('请填写完整的订单信息');
    }
  });
};

onMounted(() => {
  const animalId = route.query.animalId;
  if (animalId) {
    fetchAnimalDetails(animalId);
  } else {
    ElMessage.error('未找到宠物信息，即将返回首页');
    setTimeout(() => router.push('/'), 2000);
  }
});
</script>

<style scoped>
.create-order-page {
  max-width: 800px;
  margin: 20px auto;
}
.card-header {
  text-align: center;
}
.animal-image {
  width: 100%;
  border-radius: 8px;
}
.price, .final-price {
  color: #f56c6c;
  font-size: 1.2em;
  font-weight: bold;
}
</style>